<template>
	<view class="top_box">
		<view style="height: 40rpx;color: #62748E;line-height: 40rpx;font-size: 28rpx;">账户余额 (元)</view>
		<view
			style="height: 80rpx;width: 100%;display: flex;align-items: center;justify-content: space-between;font-size: 80rpx;">
			{{memberInfo?.balance || 0}}
			<view @click="yidongjie" v-if="memberInfo?.walletStatus==2"
				style="background-color: #F1F5F9;border-radius: 20rpx;font-size: 28rpx;display: flex;align-items: center;justify-content: center;width: 170rpx;height: 100%;color: #90A1B9;">
				已冻结</view>
			<navigator url="/pages/withdraw/withdraw" v-else
				style="background-color: #FFDF20;border-radius: 20rpx;font-size: 28rpx;display: flex;align-items: center;justify-content: center;width: 170rpx;height: 100%;">
				去提现</navigator>
		</view>
	</view>
	<view
		style="height: 120rpx;width: 100%;margin-top: 20rpx;background-color: #FEFCE8;border-radius: 30rpx;display: flex;align-items: center;justify-content: space-between;gap: 15rpx;font-size: 28rpx;padding: 36rpx;box-sizing: border-box;">
		验证中待入账 (元)
		<image src="/static/icon/wenhao_2.png" style="height: 30rpx;width: 30rpx;" @click="shuoming=true" /><text
			style="font-size: 36rpx;flex: 1;text-align: right;">{{memberInfo?.pendingAmount || 0}}</text>
	</view>
	<view class="list_box" :style="{'top': hasTips?'370rpx':'230rpx'}">
		<view class="title_box">
			<view @tap="current=0" :class="[current==0?'active':'']">全部</view>
			<view @tap="current=1" :class="[current==1?'active':'']">收款</view>
			<view @tap="current=2" :class="[current==2?'active':'']">提现</view>
		</view>

		<swiper :current="current" @change="current=$event.detail.current">
			<swiper-item>
				<scroll-view class="safe" direction="vertical" scroll-y @scrolltolower="scrolltolower" data-type='0'>
					<view class="item" v-for="item in list[0].list" :key="item.id">
						<view class="t1">{{item.remark}}<text class="amt"
								v-if="!item.productName">{{item.businessType==1?'+':'-'}} ¥
								{{item.amount}}</text></view>
						<view class="t2" v-if="item.productName">{{item.productName}}<text
								class="amt">{{item.businessType==1?'+':'-'}} ¥
								{{item.amount}}</text></view>
						<view class="t3">{{item.updateTime}}
							<text v-if="item.businessType==1 || item.status==1">余额：{{item.balanceAfter}}</text>
							<text v-else-if="item.status==5 || item.status==2"
								style="color: #020618;font-size: 28rpx;">提现审核中</text>
							<text v-else style="color: #FB2C36;font-size: 28rpx;">提现失败</text>
						</view>
						<view class="t3" v-if="item.orderCode">订单编号：{{item.orderCode}}</view>
						<view class="t3" v-if="item.rejectRemark">失败原因：{{item.rejectRemark}}</view>
					</view>
					<template v-if="list[0].list.length==0">
						<image src="/static/icon/none_wallet.png"
							style="width: 150rpx;height: 150rpx;margin-left: 300rpx;margin-top: 100rpx;" lazy-load />
						<view class="none_text">暂时还没有钱包记录</view>
					</template>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view class="safe" direction="vertical" scroll-y @scrolltolower="scrolltolower" data-type='1'>
					<view class="item" v-for="item in list[1].list" :key="item.id">
						<view class="t1">{{item.remark}}<text class="amt"
								v-if="!item.productName">{{item.businessType==1?'+':'-'}} ¥
								{{item.amount}}</text></view>
						<view class="t2" v-if="item.productName">{{item.productName}}<text
								class="amt">{{item.businessType==1?'+':'-'}} ¥
								{{item.amount}}</text></view>
						<view class="t3">{{item.updateTime}}
							<text v-if="item.businessType==1 || item.status==1">余额：{{item.balanceAfter}}</text>
							<text v-else-if="item.status==5 || item.status==2"
								style="color: #020618;font-size: 28rpx;">提现审核中</text>
							<text v-else style="color: #FB2C36;font-size: 28rpx;">提现失败</text>
						</view>
						<view class="t3" v-if="item.orderCode">订单编号：{{item.orderCode}}</view>
						<view class="t3" v-if="item.rejectRemark">失败原因：{{item.rejectRemark}}</view>
					</view>
					<template v-if="list[1].list.length==0">
						<image src="/static/icon/none_wallet.png"
							style="width: 150rpx;height: 150rpx;margin-left: 300rpx;margin-top: 100rpx;" lazy-load />
						<view class="none_text">暂时还没有收款记录</view>
					</template>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view class="safe" direction="vertical" scroll-y @scrolltolower="scrolltolower" data-type='2'>
					<view class="item" v-for="item in list[2].list" :key="item.id">
						<view class="t1">{{item.remark}}<text class="amt"
								v-if="!item.productName">{{item.businessType==1?'+':'-'}} ¥
								{{item.amount}}</text></view>
						<view class="t2" v-if="item.productName">{{item.productName}}<text
								class="amt">{{item.businessType==1?'+':'-'}} ¥
								{{item.amount}}</text></view>
						<view class="t3">{{item.updateTime}}
							<text v-if="item.businessType==1 || item.status==1">余额：{{item.balanceAfter}}</text>
							<text v-else-if="item.status==5 || item.status==2"
								style="color: #020618;font-size: 28rpx;">提现审核中</text>
							<text v-else style="color: #FB2C36;font-size: 28rpx;">提现失败</text>
						</view>
						<view class="t3" v-if="item.orderCode">订单编号：{{item.orderCode}}</view>
						<view class="t3" v-if="item.rejectRemark">失败原因：{{item.rejectRemark}}</view>
					</view>
					<template v-if="list[2].list.length==0">
						<image src="/static/icon/none_wallet.png"
							style="width: 150rpx;height: 150rpx;margin-left: 300rpx;margin-top: 100rpx;" lazy-load />
						<view class="none_text">暂时还没有提现记录</view>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
	<view class="jiageshuoming" v-if="shuoming">
		<view class="sanjian"></view>
		<view
			style="height: 36rpx;width: 100%;position: absolute;top: 0;left: 0;background-color: #ffffff;border-radius: 30rpx 30rpx 0 0;">
		</view>
		<view class="t">验证中待入账</view>
		<view class="c">您当前有已经提交后正在验证的卡券订单，待验证通过后，款项会立即打到您的钱包余额。</view>
		<view class="b" @click="shuoming=false">我知道了</view>
	</view>
</template>

<script>
	import api from '@/utils/api.js';
	export default {
		data() {
			return {
				memberInfo: null,
				shuoming: false,
				current: 0,
				hasTips: true,
				list: [{
					apiFunction: async function(data) {
						let {
							result = []
						} = await api.bill_list(data);
						return result;
					},
					pageNum: 1,
					list: []
				}, {
					apiFunction: async function(data) {
						let {
							result = []
						} = await api.bill_list_receive(data);
						return result;
					},
					pageNum: 1,
					list: []
				}, {
					apiFunction: async function(data) {
						let {
							result = []
						} = await api.bill_list_withdraw(data);
						return result;
					},
					pageNum: 1,
					list: []
				}],
			}
		},
		async onLoad() {
			await this.getData(0);
			await this.getData(1);
			await this.getData(2);
		},
		async onShow() {
			let {
				result: memberInfo = null
			} = await api.member_info();
			this.memberInfo = memberInfo;
		},
		methods: {
			scrolltolower(e) {
				let index = e.currentTarget.dataset.type;
				let item = this.list[index];
				item.pageNum++;
				this.$nextTick(() => {
					this.getData(index);
				})
			},
			async getData(index) {
				let item = this.list[index];
				let l = await item.apiFunction({
					reasonable: false,
					pageSize: 10,
					pageNum: item.pageNum
				});
				if (l == null || l.length == 0) {
					if (item.pageNum > 1) {
						uni.showToast({
							title: '没有更多了～',
							icon: 'none',
							duration: 1500
						})
						item.pageNum--;
					}
				} else {
					item.list.push(...l);
				}
			},
			yidongjie() {
				uni.showToast({
					title: '提现审核失败\n请联系客服人员处理',
					icon: 'none',
					duration: 1500
				})
			},
		}
	}
</script>

<style>
	.top_box {
		height: 210rpx;
		width: 100%;
		border-radius: 0 0 30rpx 30rpx;
		background-color: #ffffff;
		padding: 36rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
	}

	.list_box {
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0 0;
		position: absolute;
		left: 0;
		width: 750rpx;
		bottom: 0;
		top: 370rpx;
	}

	.list_box .title_box {
		padding: 30rpx 36rpx;
		box-sizing: border-box;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #62748E;
	}

	.list_box .title_box view {
		flex: 1;
		font-weight: bold;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.list_box .title_box .active {
		text-decoration: underline 6rpx #FFDF20;
		text-decoration-skip-ink: none;
		text-underline-offset: -6rpx;
		color: #020618;
	}

	swiper {
		position: absolute;
		left: 0;
		width: 100%;
		top: 100rpx;
		height: calc(100% - 100rpx);
	}

	swiper scroll-view {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.item {
		width: 678rpx;
		margin-left: 36rpx;
		height: auto;
		padding: 36rpx 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 10rpx;
		border-bottom: 1px solid #E2E8F0;
	}

	.item view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.item .t1 {
		height: 50rpx;
		font-size: 28rpx;
	}

	.item .t2 {
		height: 50rpx;
		font-size: 34rpx;
	}

	.item .t3 {
		height: 40rpx;
		font-size: 24rpx;
		color: #62748E;
	}

	.item view .amt {
		font-size: 36rpx;
	}

	.jiageshuoming {
		width: 480rpx;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 30px 0px rgba(2, 6, 24, 0.02), 0px 5px 15px 0px rgba(2, 6, 24, 0.05), 0px 0px 2px 0px rgba(2, 6, 24, 0.1);
		border-radius: 30rpx;
		padding: 36rpx;
		position: absolute;
		top: 330rpx;
		left: 50rpx;
		box-sizing: border-box;
		position: absolute;
		z-index: 9999999;
	}

	.jiageshuoming .sanjian {
		background-color: #ffffff;
		height: 40rpx;
		width: 40rpx;
		border-radius: 10rpx 0 0 0;
		position: absolute;
		top: -15rpx;
		left: 220rpx;
		box-shadow: -5rpx -5rpx 30rpx 0px rgba(2, 6, 24, 0.02), -5rpx -5rpx 30rpx 0px rgba(2, 6, 24, 0.05), -5rpx -5rpx 30rpx 0px rgba(2, 6, 24, 0.1);
		transform: rotate(45deg);
	}

	.jiageshuoming .t {
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 36rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.jiageshuoming .c {
		font-size: 28rpx;
		line-height: 40rpx;
		margin-bottom: 36rpx;
	}

	.jiageshuoming .b {
		background-color: #FFDF20;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		border-radius: 20rpx;
	}
</style>